<template>
  <div class="login">
    <div class="login-con">
      <div style="text-align: center;height: 60px;line-height: 60px;color: white;word-break: keep-all;">
        <h3>欢迎登录AI舌诊系统后台</h3>
      </div>
     <div v-if="type==='password'" icon="log-in">
       <div class="form-con">
         <el-form @keydown.enter.native="handleSubmit">
           <div class="iptClass">
             <el-input v-model="username" class="ipt" placeholder="请输入用户名">
               <span slot="prepend">
                 <i class="el-icon-user-solid" />
               </span>
             </el-input>
           </div>
           <div class="iptClass">
             <el-input v-model="password" class="ipt" type="password" placeholder="请输入密码">
               <span slot="prepend">
                 <i class="el-icon-lock" />
               </span>
             </el-input>
           </div>
<!--            <div class="phone-login" @click="type='phone'">手机号登录</div>-->
           <div style="text-align: center;">
             <el-button style="width: 100%;" type="primary" @click="handleSubmit">登录</el-button>
           </div>
         </el-form>
       </div>
     </div>
      <div v-if="type==='phone'" icon="log-in">
        <div class="form-con">
          <el-form @keydown.enter.native="handleSubmit">
            <div class="iptClass">
              <el-input v-model="phone" class="ipt" placeholder="请输入手机号">
               <span slot="prepend">
                 <i class="el-icon-phone" />
               </span>
              </el-input>
            </div>
            <div class="iptClass">
              <el-input v-model="verification_code" class="ipt" type="text" placeholder="请输入验证码">
               <span slot="prepend">
                 <i class="el-icon-lock" />
               </span>
              </el-input>
              <div class="code-btn" @click="getCode" :class="isDisabled ? 'disabled' : ''">{{ count ? count + 's后重试' : '获取验证码' }}</div>
            </div>
            <div class="phone-login" @click="type='password'">账号密码登录</div>
            <div style="text-align: center;">
              <el-button style="width: 100%;" type="primary" @click="handleSubmit">登录</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      type: "password",
      username:"",
      password:"",
      phone: "",
      verification_code: "",
      count: 0,
      timer: null,
      isDisabled: false,
    }
  },
  mounted() {
    this.checkLogin()
  },
  methods: {
    async checkLogin() {
      let _this = this
      let res = await _this.$api.getAdminUserInfo()
      if (res.data.level == 'success') {
          this.$message({
            message: '登录成功！',
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$router.replace({
                path: '/userList'
              })
            }
          })
        }
    },

    // 提交登录按钮
    handleSubmit() {
      if (this.type === 'password') this.getlogin();
      else if (this.type === 'phone') this.staffLogin();
    },

    // 账号密码登录
    async getlogin() {
         var _this = this
         const res = await _this.$api.signInUser({
           username: _this.username,
           password:_this.password
         })

         if (res.data.level === 'success') {
           window.localStorage.setItem('user_token', res.data.data);
           window.localStorage.setItem("is_staff", "0");
           this.$message({
             message: '登录成功！',
             type: "success",
             duration:1000,
             onClose:()=>{
               this.$router.push({ path: '/userList' })
             }
           })
         }else {
           this.$message.error(res.data.message);
         }
   },

    // 验证码倒计时
    countTime() {
      const time = 60;
      if (!this.timer) {
        this.count = time;
        this.isDisabled = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= time) {
            this.count -= 1;
          } else {
            this.isDisabled = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        },1000)
      }
    },

    // 获取验证码
    async getCode() {
      if (!this.isDisabled) {
        const res = await this.$api.sendVerificationCode({phone: this.phone});
        if (res.data.level === 'success') {
          this.countTime();
        }
        this.$message({
          message: res.data.message,
          type: res.data.level
        })
      } else {
        // this.$message.error("请等待60秒后再发送");
      }
    },

    // 手机号验证码登录
    async staffLogin() {
      const params = {
        phone: this.phone,
        verify_phone: this.verification_code
      };
      const res = await this.$api.staffLogin(params);
      this.$message({
        message: res.data.message,
        type: res.data.level,
      })
      if (res.data.level === "success") {
        window.localStorage.setItem('user_token', res.data.data);
        window.localStorage.setItem("is_staff", "1");
        setTimeout(() => { this.$router.replace("/clue_list") },1000)
      }
    },

  }
}
</script>
<style lang="scss" scoped="scoped">
  .login{
    width: 100%;
    height: 100%;
    background-color: #001528;

    .login-con{
      width: 26%;
      margin: auto;
      padding-top: 110px ;

      .form-con{
        .iptClass{
          position: relative;
          .code{
            width: 65%;
          }

          .btn-code{
            width: 35%;
          }
          .code-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 25%;
            height: 100%;
            color: #C0C4CC;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            background-color: #00101e;
            border-left: 1px solid #ffffff1a;
            user-select: none;
          }
          .code-btn:hover {
            color: #409EFF;
          }
          .code-btn.disabled {
            cursor: not-allowed;
            opacity: .5;
          }
          .code-btn.disabled:hover {
            color: #C0C4CC;
          }
        }

        .phone-login {
          margin-bottom: 20px;
          color: #C0C4CC;
          text-align: right;
          font-size: 14px;
          cursor: pointer;
          user-select: none;
          transition: color .2s;
        }
        .phone-login:hover {
          color: #409EFF;
        }
      }
    }
  }

  #pwrap{
    /*padding: 4px 20px 26px 20px;*/
    margin-top: 40px;
    color: white;
    text-align: center;
  }
  #spanleft{
    float: left;

  }
  #spanright{
    float: right;
  }
</style>
<style scoped="scoped">

  .iptClass {
    margin-bottom: 20px;
    border: 1px solid #ffffff1a;
  }

  .ipt {
    height: 50px;
  }

  /deep/ .el-input-group__prepend {
    background-color: #0000003d;
    border: none;
  }

  /deep/.el-input-group--prepend .el-input__inner,
  .el-input-group__append {
    background-color: #0000003d;
    height: 50px;
    border: none;
    color: #ecf5ff;
  }

  /deep/.el-input-group__prepend {
    font-size: 18px;
  }

  /deep/.el-input__inner {
    padding: 0;
  }
</style>
